<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myDiv">Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default
    context menu.
</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color: silver">
    <li><a href="http://www.somewhere.com"> somewhere</a></li>
    <li><a href="http://www.wrox.com">Wrox site</a></li>
    <li><a href="http://www.somewhere-else.com">somewhere-else</a></li>
</ul>
<script>
    /*
       1. contextmenu 事件
            - 用于取消浏览器默认的右键行为(win:右键调出菜单 mac:control+单击)
            - 注意要先阻止,然后再做自己的事event.preventDefault();

     */

    window.addEventListener("load", (event) => {
        let div = document.getElementById("myDiv");

        // 取消右键行为
        div.addEventListener("contextmenu", (event) => {
            event.preventDefault();
            let menu = document.getElementById("myMenu");
            menu.style.left = event.clientX + "px";
            menu.style.top = event.clientY + "px";
            menu.style.visibility = "visible";
        });
        document.addEventListener("click", (event) => {
            document.getElementById("myMenu").style.visibility = "hidden";
        });
    });

</script>
</body>
</html>